<template>
  <view class="police-status-list bg-white px-2 box-border min-h-[100vh]">
    <up-list @scrolltolower="scrolltolower" height="100vh">
      <up-list-item v-for="(item, index) in list" :key="index">
        <up-gap height="10"></up-gap>
        <personalModule
          :height="222"
          :leftWidth="170"
          :contentStyle="{ padding: '24rpx' }"
          :showStatus="item.dutyStatus != 3 ? true : false"
          showGapLine
          :statusName="item.dutyStatus != 3 ? '在岗' : ''"
          statusBgColor="#33A954"
        >
          <template #left>
            <view
              class="flex flex-col justify-center items-center text-center w-[100%] h-[100%]"
            >
              <up-avatar
                :src="imgPrefix + item.avatar"
                shape="circle"
                size="50"
              ></up-avatar>
              <text class="text-[25rpx] color-black mt-2">{{
                item.communityName + "民警"
              }}</text>
            </view>
          </template>
          <template #right>
            <view
              class="police-text text-[25rpx] color-black flex flex-col justify-between"
            >
              <view
                >姓名：<text class="font-bold">{{ item.userName }}</text></view
              >
              <view>警号：{{ item.badgeNumber }}</view>
              <view @click="callPhone(item.phonenumber)"
                >电话：{{ item.phonenumber }}</view
              >
              <view class="flex flex-row items-end" @click="navPosition(item)">
                <view
                  class="max-w-[92%] whitespace-nowrap text-ellipsis overflow-hidden"
                  >社区地址：{{ item.communitAddress }}</view
                >
                <image
                  class="w-[28rpx] h-[33rpx] ml-1"
                  :src="locationIcon"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </template>
        </personalModule>
        <up-gap height="10" v-if="index + 1 == list.length"></up-gap>
      </up-list-item>
    </up-list>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import locationIcon from "@/static/icon/location.png";
import { selectIndexPoliceUser } from "@/api/police/index";
import { callPhone } from "@/utils/tools";
import { imgPrefix } from "@/config/app";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const list = ref(<any>[]);
onLoad(() => {
  getCommunityPolices();
  // loadmore();
});

const scrolltolower = () => {
  loadmore();
};

const loadmore = () => {
  console.log("加载更多");
};
// 位置导航
const navPosition = (poiInfo: any) => {
  uni.openLocation({
    latitude: poiInfo.lat,
    longitude: poiInfo.lnt,
    scale: 18,
    name: poiInfo.communityName,
    address: poiInfo.communitAddress,
    success: function () {
      console.log("success");
    },
    fail: function (err) {
      console.log(err);
    },
  });
};
// 获取社区民警信息
const getCommunityPolices = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  selectIndexPoliceUser({ communityId: userInfoStore.crowdInfo.communityId })
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      list.value = data ?? [];
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
</script>
<style lang="scss" scoped>
.police-text {
  width: calc(100% - 170rpx - 0.8rpx - 32rpx);
  height: 100%;
}
</style>
